<template>
	<view class="waterfall-flow " ref="waterfall">
		<!-- class="item" 必须有, 限制好 item 宽度  -->
		<view class="item" :style="item.style" v-for="(item, index) in newList" :key="index" :data-index="index">
			<!-- 盒子样式，自定义 -->
			<view class="box" @click="choose(item)" >
				<view class="pic">
					<image class="image" mode="widthFix" :src="item.img" style="width: 100%; display: block;" ></image>
				</view>
				<!-- <view class="content" style="margin-left: 10rpx;">{{item.content}}</view> -->
				<!-- <view class="user">
					<image style="width: 40upx; height: 40upx; border-radius: 50%; margin-right: 10upx;" 
						:src="item.user.avatar" ></image>
					<text>{{item.user.name}}</text>
				</view> -->
				<!-- <view style="margin-left: 20rpx;">美食名称：{{item.title}}</view> -->
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data () {
			return {
				newList: [], // 兼容小程序
				boxHeight: []
			}
		},
		created() {
			//console.log(this.list)
			this.$set(this.list)
		},
		watch: {
			list: function (newVal, oldVal) {
				//console.log("aa")
				oldVal = []
				// console.log(newVal)
				// console.log(0)
				// console.log(oldVal)
				if (newVal != oldVal) {
					// #ifndef MP-WEIXIN
					this.newList = this.list;
					// #endif
					// #ifdef MP-WEIXIN
					this.newList = this.newList.concat(newVal)
					// #endif
					//let mark = oldVal.length;
					let len = this.list.length;
					let screenWidth = uni.getSystemInfoSync().screenWidth;
					let style = '';
					this.$nextTick(async function () {
						const query = uni.createSelectorQuery().in(this);
						let dataArray = [];
						console.log(dataArray)
						await new Promise((resolve, reject)=>{
							setTimeout(() => {
								query.selectAll(' .item').fields({size: true}, data => {
									dataArray = data;
									console.log(data)
									resolve()
								}).exec();
							}, 520) // 针对图片 mode="widthFix" 尺寸改变时的延迟
						})
						console.log(dataArray)
						for (let i = 0; i < len; i++) {
							if (i < 2) {
								style = `top: 0; left: ${(screenWidth/2) * i}px;`
								this.boxHeight.push(dataArray[i].height)
							} else {
								let minHeight = this.boxHeight[0];
								if (minHeight > this.boxHeight[1]) {
									minHeight = this.boxHeight[1];
									this.boxHeight[1] = minHeight + dataArray[i].height;
									style = `top: ${minHeight}px; left: ${(screenWidth/2)}px;`
								} else {
									this.boxHeight[0] = minHeight + dataArray[i].height;
									style = `top: ${minHeight}px; left: 0;`
								}
							}
							this.$set(this.newList[i], 'style', style);
							this.$forceUpdate();
						}
					})
				}
			},
			immediate: true,
			// deep: true
		},
		methods: {
			// 选中
			choose:function(e) {
					console.log(e)
					// item 返回选中 JSON 对象
					//console.log(item)
					let openid = uni.getStorageSync('openid')
					if (openid.length == 0)
					this.$uniLogin.getUserProfile()
					//跳转到详情页
					uni.navigateTo({
						url: "/pages/detail_page/index",
						success: function(res) {
						    // 通过eventChannel向被打开页面传送数据
						    res.eventChannel.emit('acceptDataFromOpenerPage', { data: e })
						  }
					})
			},
			
		}
	}
</script>

<style scoped>
	image {
		display: block;
		will-change: transform;
	}
	.waterfall-flow {
		position: relative;
		background-color: #ffffff;
	}
	/* 为了初始化，还为定位上，加上这个 */
	.item {
		width: 375rpx;
		position: absolute;
		top: -375rpx;
		left: -375rpx;
		background-color: white;
	}
	.box {
		margin: 10rpx;
		box-shadow: 10rpx 10rpx 10rpx #ccc;
		overflow: hidden;
		border-radius: 20rpx;
		padding: 0;
		background-color: #ffffff;
	}
	.user {
		display: flex;
		align-items: center;
		padding: 10rpx;
	}
	.content {
		font-size: 32rpx;
		padding: 20rpx 10rpx 0 10rpx;
		color: #333;
	}
</style>
